<template>
<div style="display: flex;">
        <ul class="folderBox" :style="theme">
            <li v-for="item in props.data[0]?.mediaListResponse.list" 
                :key="item.id" 
                @click="getConter(item.id)"
                :style="isSel === item.id?{ 'background-color':'#409EFF','color':'white' }:''"
                >
                <span>{{ item.title }}</span>
                <span  :style="isSel === item.id?{ 'color':theme['--selCollectLeftNum'] }:''">{{ item.media_count }}</span>
            </li>
            <li><a href="#">全部收藏夹 ></a></li>
        </ul>
        <ul class="contentBox" :style="theme">
            <template v-if="isSel !== 0">
                <li v-for="item in list" :key="item.id" @click="goLookVideo(item)">
                    <content-item 
                        :cover="item.cover"
                        :title="item.title"
                        :name="item.upper?.name"
                        :duration="item.duration"
                    ></content-item>
                </li>
            </template>
            <template v-else>
                <li v-for="item in list?.list" :key="item.cid" @click="goLookVideo(item)">
                    <content-item 
                        :cover="item.pic"
                        :title="item.title"
                        :name="item.owner.name"
                        :duration="item.duration"
                    ></content-item>
                </li>
            </template>
        </ul>
</div>

</template>

<script lang="ts" setup>
import { watch,ref,Ref } from 'vue'
import { get } from '../../http/axios'
import contentItem from './components/contentItem.vue';
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'

interface Props {
    data:Array<any>
}
//目前只对接需要的
interface collectConter {
    id:number,
    bvid:string
    ugc:{
        first_cid:number
    }
    cover:string ,      //图片
    duration:number ,   //时长
    title:string ,
    upper:{
        name:string
    },
    list?:[{
        aid:number
        bvid:string
        cid:number
        pic:string,
        duration:number,
        title:string,
        owner:{
            name:string
        }
    }]
}

const props = defineProps<Props>()
let isSel = ref<number>()
let list = ref<Array<collectConter>>([])
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))

function getConter(val:number){
    isSel.value = val
    let url:string = '/x/v3/fav/resource/list4navigate?platform=web&media_id='+val
    if(val == 0) url ='/x/v2/history/toview/web'
    get(url,'','/bili').then((res:any) => {
        console.log('选择收藏夹内容', res.data);
        list.value = res.data

    })
    
}
function goLookVideo(el:collectConter) {
    if (el.ugc){
        let routeData = router.resolve({path:'/video',query:{'avid':el.id,'bvid':el.bvid,'cid':el.ugc.first_cid}})
        window.open(routeData.href, '_blank');
    } else {
        let routeData = router.resolve({path:'/video',query:{'avid':el.aid,'bvid':el.bvid,'cid':el.cid}})
        window.open(routeData.href, '_blank');
    }
}
//处理稍后再看排在第二位
watch(()=>props.data,() => {
    if (props.data) {
        getConter(props.data[0].mediaListResponse.list[0].id)
        let { name, mediaListResponse: { count:media_count } } = props.data[1]
        props.data[0].mediaListResponse.list.splice(1, 0,{ title: name ,media_count: media_count,id:0 })
    }
})

</script>

<style lang="scss" scoped>
$sysPopoverBackground: var(--backgroundColor);
$sysPopoverLableColor: var(--lableColor);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
ul{
    list-style: none;
    padding: 0;
    margin: 5px 0;
}
li {
    box-sizing: border-box;
}
.folderBox{
    width: 35%;
    height: 480px;
    overflow-y:auto;
    &::-webkit-scrollbar{
        width:4px ;
    }
    &::-webkit-scrollbar-thumb{
        background-color: #CDD0D6;
        border-radius:10px ;
    }
    & li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        color: $sysPopoverTitleColor;
        width: 100%;
        border-radius: 4px;
        height: 40px;
        transition:  all .3s;
    }
    & li span:nth-child(2){
        color: $sysPopoverLableColor;
    }
    & li:hover{
        background-color: $sysPopoverHoverLableColor;
    }
    & li:last-child a{
        color: #45aaf2;
    }
}
.contentBox{
    width: 65%;
    height: 480px;
    @include scrollBar;
    & li{
        display: flex;
        padding: 0 5px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-radius: 4px;
        height: 80px;
        transition:  all .3s;
        cursor: pointer;
    }
    & li:hover{
        background-color: $sysPopoverHoverLableColor;
    }
}
.contentItemLeft{
    width: 40%;
    height: 90%;
    position: relative;
    display: flex;
    & img{
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }
    & span{
        padding: 2px 4px;
        background-color: rgba(0,0,0,.4);
        border-radius:4px ;
        position: absolute;
        bottom: 5px;
        right: 10px;
        font-size: 12px;
        color: white;
    }
}
.contentItemRight{
    width: 60%;
    height: 90%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & span:nth-child(1){
        @include tweLineShow;
        color: #18191C;
    }
    & span:nth-child(2){
        display: flex;
        align-items: center;
        color: #9499A0;
        font-size:12px ;
    }
    & span:nth-child(2) img{
        margin-right: 5px;
    }
}

</style>